<div class="panel panel-default library-pane" ng-controller="LibraryController">
  <div class="panel-body">
    <div class="btn-group create-pipeline-btn-group" ng-if="!common.isSlaveNode">
      <button type="button" class="btn btn-primary btn-sm create-pipeline-btn"
              ng-disabled="!isAuthorized([userRoles.admin, userRoles.creator])"
              ng-click="addPipelineConfig()">
        <span class="glyphicon glyphicon-plus"></span>
        <span translate="home.header.createNewPipeline">Create</span>
      </button>
      <button type="button" class="btn btn-primary btn-sm dropdown-toggle"
              ng-disabled="!isAuthorized([userRoles.admin, userRoles.creator])"
              data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li>
          <a href="#" ng-click="addPipelineConfig()" translate="home.header.createNewPipeline">Create New Pipeline</a>
        </li>
        <li>
          <a href="#" ng-click="importPipelineConfig()"translate="home.header.importPipeline">Import Pipeline</a>
        </li>
        <li>
          <a href="#" ng-click="importPipelinesFromArchive()"translate="home.header.importPipelinesFromArchive">Import Pipelines From Archive</a>
        </li>
        <li>
          <a href="#" ng-click="importPipelinesFromHttpUrl()"translate="home.importPipelineFromHttpUrl">Import Pipelines From URL</a>
        </li>
        <li>
          <a href="#"
             ng-if="common.isDPMEnabled"
             ng-click="downloadRemotePipelineConfig()"translate="home.downloadRemotePipeline">Download Remote Pipeline</a>
        </li>
        <li>
          <a href="#" ng-click="downloadEdgePipelines()"translate="home.downloadEdgePipelines.title">Download Edge Pipelines</a>
        </li>
      </ul>
    </div>

    <div show-loading="fetchingSystemLabels"></div>

    <ul class="list-group predefined-labels" mutation-callback="treeElementChange">
      <li class="hidden">{{treeElementTimestamp}}</li>

      <li ng-repeat="systemLabel in systemPipelineLabels"
          class="list-group-item pointer clearfix">

        <div ng-click="onSelectLabel(systemLabel)"
             ng-class="{'active': selectedPipelineLabel === systemLabel}"
             class="list-group-item-wrapper">{{'home.library.' + systemLabel | translate}}
        </div>
      </li>

      <li class="border-list-group-item" ng-if="hasPipelineLabels()">
        <span translate="global.form.labels">LABELS</span>
      </li>

      <li ng-if="hasPipelineLabels()">
        <div class="btn-group label-filter-wrapper">

          <input ng-model="labelFilter.value"
                 ng-model-options="{debounce: getDebounce()}"
                 ng-class="{'loading-labels': getDebounce() > 0 && loadingLabels}"
                 ng-change="filterLabels()"
                 type="search"
                 class="form-control label-filter-input"
                 placeholder="Filter Labels">

          <span ng-hide="getDebounce() > 0 && loadingLabels" ng-click="clearLabelFilter()" class="glyphicon glyphicon-remove-circle label-filter-icon"></span>
          <i ng-show="getDebounce() > 0 && loadingLabels" class="fa fa-circle-o-notch fa-spin fa-fw label-filter-icon"></i>
        </div>
      </li>

      <li ng-repeat="node in pipelineLabels track by node.vPath"
          ng-show="node.isVisible"
          class="list-group-item pointer clearfix">

        <div ng-click="onSelectNode(node)"
             ng-class="{'active': selectedPipelineLabel === node.vPath}"
             class="list-group-item-wrapper"
             style="padding-left: {{::node.level * 10}}px">

          <span class="list-group-icon-wrapper">
            <i ng-show="hasChildren(node) && node.isExpanded" class="fa fa-caret-down"></i>
            <i ng-show="hasChildren(node) && !node.isExpanded" class="fa fa-caret-right"></i>
          </span>

          <span class="label-display" ng-attr-id="{{::node.label}}"></span>
        </div>
      </li>

    </ul>
  </div>
 </div>
